import { useRef, useState } from "react";
import Logs from "./Components/Logs/Logs";
import LogsForm from "./Components/LogsForm/LogsForm";
import UserList from "./Components/classComponents/class";

const App = () => {
    const [count, setCount] = useState(1);
    const [user, setUser] = useState({ name: "jiaugangfei", age: 123 });
    const contentsref = useRef();//以此创建的对象，保证每次获取的对象是同一个对象；dom对象或者需要一个跟组件生命周期相同的对象
    const [logData, setLogData] = useState([
        { id: 1, data: new Date("2020,2,2"), title: '标题1', content: '内容1' },
        { id: 2, data: new Date("2020,3,2"), title: '标题2', content: '内容2' },
        { id: 3, data: new Date("2020,4,2"), title: '标题3', content: '内容3' },
        { id: 4, data: new Date("2020,5,2"), title: '标题4', content: '内容4' },
        { id: 5, data: new Date("2020,6,2"), title: '标题5', content: '内容5' },
    ])
    const deleteItem = (index) => {
        setLogData(preState => [...preState].slice(index, 1));
    }

    const addData = (item) => {
        item.id = 6
        console.log(item);
        setLogData([...logData, item]);
    }
    const addHandle = () => {
        console.log(contentsref.current);
        setCount(preState => preState + 1);
    }
    const lessHandle = () => {
        setCount(preState => preState - 1);
    }
    const userHandle = () => {
        setTimeout(() => {
            // setUser({...user,name:"jiaugangfei",age:user.age+1})
            setUser(preState => { return { ...preState, age: preState.age + 1 } });
        }, 1000);
    }
    return <div>
        <LogsForm save={addData} />
        <Logs logData={logData} />
        <div>
            <h1 ref={contentsref}>{count}</h1>
            <div>姓名{user.name} === 年龄{user.age}</div>
            <button onClick={userHandle}>修改用户</button>
            <button onClick={lessHandle}>-</button>
            <button onClick={addHandle}>+</button>
            <UserList name="jiaguangfei" age="88" address="baoanqu" />
        </div>
        {/* Add more components here */}
        {/* ... */}
    </div>
}

export default App;